<template>
    <div ref="chartRef" style="width: 600px; height: 400px"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useI18n } from 'vue-i18n'; 
//import myTheme from './js/theme'; // 引入自定义主题
const chartRef = ref<HTMLElement | null>(null);
//echarts.registerTheme('myTheme', myTheme);
const { t } = useI18n();
// 在组件挂载时初始化图表
onMounted(() => {
    initChart();
});
// 初始化图表
const initChart = () => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value);
        const colors = ["#08263b", "#6030d6", "#065b98"];
        // 配置图表选项
        const option: echarts.EChartsOption = {
            title: {
                text: t("最近七天趋势"),
                subtext: "",
                left: "center",
            },
            color: colors,
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                },
            },
            grid: {
                right: "20%",
            },
            toolbox: {
                feature: {
                    dataView: { show: false, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            legend: {
                top: "bottom",
            },
            xAxis: [
                {
                    axisLabel: {
                    color: '#03192f',  // 设置字体颜色为红色
                    fontSize: 14,      // 可选：设置字体大小
                    fontFamily: 'Arial', // 可选：设置字体
                    fontWeight: 'bold'   // 可选：设置字体粗细
                    },
                    type: "category",
                    axisTick: {
                        alignWithLabel: true,
                    },
                    data: [t('星期一'), t('星期二'), t('星期三'), t('星期四'), t('星期五'), t('星期六'), t('星期日')],
                },
            ],
            yAxis: [
                {
                    type: "value",
                    name: t("收入"),
                    position: "right",
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[0],
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                    },
                },
                {
                    type: "value",
                    name: t("平均"),
                    position: "right",
                    alignTicks: true,
                    offset: 80,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[1],
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                    },
                },
                {
                    type: "value",
                    name: t("产出"),
                    position: "left",
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[2],
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                    },
                },
            ],
            series: [
                {
                    name: t("产出"),
                    type: "bar",
                    data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
                },
                {
                    name: t("平均"),
                    type: "line",
                    yAxisIndex: 1,
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
                },
                {
                    name: t("收入"),
                    type: "bar",
                    yAxisIndex: 2,
                    data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6],
                },
            ],
        };

        // 设置图表的配置项和数据
        chart.setOption(option);

        // 监听窗口大小变化，自动调整图表大小
        window.addEventListener("resize", () => {
            chart.resize();
        });
    }
};
</script>

<style scoped>
/* 根据需要添加样式 */
</style>
